$(function() {



            $("#td1").click(function() {
                $("#tablewuliao").empty();
                var htmltable =
                    "<tr>" + "<td colspan=\"2\">物料清单</td>" + "</tr>" + "<tr>" + "	<td id='tdtd1'>18DIPLC</td>" + "	<td id='tdtd2'>12DOPLC</td>" + "</tr>" + "<tr>" + "	<td id='tdtd3'>8AIPLC</td>" + "	<td id='tdtd4'>电源</td>" + "</tr>" + "<tr>" + "	<td id='tdtd5'>开关</td>" + "	<td id='tdtd6'>中继</td>" + "</tr>" + "<tr>" + "	<td id='tdtd7'>插座</td>" + "	<td id='tdtd8'>端子</td>" + "</tr>" + "<tr>" + "	<td id='tdtd9'>路由器</td>" + "	<td id='tdtd10'>视频存储</td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>" + "<tr>" + "	<td></td>" + "	<td></td>" + "</tr>";
                $("#tablewuliao").append(htmltable);



                $("tr td").click(function(e) {
                    var v_id = $(e.target).attr('id');
                    if (v_id == "tdtd1") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>西门子</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>CPU SR40</span></li>" + "<li>预估周期：<span>3600</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd2") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>西门子</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>CPU SR40</span></li>" + "<li>预估周期：<span>3600</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd3") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>西门子</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>CPU SR40</span></li>" + "<li>预估周期：<span>3600</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd4") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>明纬</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>DR-30-12</span></li>" + "<li>预估周期：<span>1200</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd5") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>施耐德</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>XB2-BD33C</span></li>" + "<li>预估周期：<span>2400</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd6") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>魏德米勒</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>DRM270730LT+FS2COECO</span></li>" + "<li>预估周期：<span>2400</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd7") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>国产名优</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>AC30-3 16A</span></li>" + "<li>预估周期：<span>2400</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd8") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>菲尼克斯</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>双层2.5</span></li>" + "<li>预估周期：<span>2400</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd9") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>TPLINK</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>TL-ER5510G</span></li>" + "<li>预估周期：<span>2400</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    } else if (v_id == "tdtd10") {
                        $("#wlsxul").empty();
                        var html = "<li>厂商：<span>海康威视</span></li>" + "<li>安装时间：<span>2016-6-1</span></li>" + "<li>型号：<span>DS-ALG6LS</span></li>" + "<li>预估周期：<span>2400</span></li>" + "<li>其他：<span></span></li>";
                        $("#wlsxul").append(html);
                    }

                });
            });




            var myChart03 = echarts.init(document.getElementById('chart_period'));
            var chart_supplies_option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '0%',
                    containLabel: true
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['0', '180', '276', '360', '540', '720', '900', '1080', '1440', '1620', '1800', '2160', '2520', '2880', '3240', '3600'],
                    splitLine: {　　　　
                        show: false,
                        axisLabel: {
                            textStyle: {
                                color: '#34b3ff'
                            }
                        }　　
                    },
                    boundaryGap: true,
                    axisTick: false
                }],
                yAxis: [{
                    type: 'value',
                    //去除背景网格线
                    splitLine: {　 show: false },
                    axisTick: false
                }],
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: "8px",
                        color: "#fff",
                        align: "center"
                    },
                    formatter: function(e) {
                        return e;
                    }
                },
                series: [{
                        name: '可使用',
                        type: 'line',
                        smooth: true,
                        // stack: '总量',
                        symbol: 'star',
                        itemStyle: { normal: { color: '#34b3ff', areaStyle: { type: 'default' } } },
                        data: [1, 0.9, 0.89, 0.88, 0.79, 0.78, 0.69, 0.65, 0.65, 0.59, 0.55, 0.35, 0.30, 0.26, 0.19, 0.1],
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(52, 179, 255,0.4)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(52, 179, 255,0)'
                                }])
                            }
                        },
                        markPoint: {
                            data: [{
                            symbol: 'image://img/maintain_03.png', // 系列级个性化拐点图形
                            symbolSize: [62, 28],
                            symbolOffset: ['0%', '-100%'],
                                    coord:[5,0.78],
                                    label:{
                                    	normal:{
                                    		show:false
                                    	}
                                    }
                                },{
                            symbol: 'image://img/maintain_07.png', // 系列级个性化拐点图形
                            symbolSize: [62, 28],
                            symbolOffset: ['0%', '-100%'],
                                    coord:[11,0.35],
                                    label:{
                                    	normal:{
                                    		show:false
                                    	}
                                    }
                                },{
                            symbol: 'image://img/preserving.png', // 系列级个性化拐点图形
                            symbolSize: [20, 26],
                            symbolOffset: ['0%', '-100%'],
                                    coord:[8,0.65],
                                    label:{
                                    	normal:{
                                    		show:false
                                    	}
                                    }
                                },]
                            }
                        }]

                }
                myChart03.setOption(chart_supplies_option);
            })
